import type { ActionType } from '@ant-design/pro-components';
import { ProForm, ProFormText, ProTable } from '@ant-design/pro-components';
import { Button, Form } from 'antd';
import { useContext, useEffect, useRef, useState } from 'react';
import { queryClient } from '@fill/client';
import { invoke } from '@tauri-apps/api/tauri';
import { FillContext } from '../app/Fill';
import { CONFIG_KEYS } from '../../constants/config';
import { useSync } from './useSync';

export default function Sync() {
  const actionRef = useRef<ActionType>();
  const { columns } = useSync(actionRef);
  const [filter, setFilter] = useState({
    name: '',
  });

  const {
    config,
  } = useContext(FillContext);

  useEffect(() => {
    console.log(filter);
    actionRef.current?.reload();
  }, [filter]);

  useEffect(() => {
    actionRef.current?.reload();
  }, [config]);

  const [form] = Form.useForm<any>();

  return (
    <ProTable<any>
      columns={columns}
      actionRef={actionRef}
      editable={{
        type: 'multiple',
      }}
      rowKey="id"
      search={false}
      options={false}
      request={async ({ current, pageSize }) => {
        const serve = config[CONFIG_KEYS.SERVER][0];
        const slug = config[CONFIG_KEYS.F_XCZDX_NAME_];

        if (!serve && !slug)
          return {};

        const { result } = await queryClient.fetchQuery({
          queryKey: ['sync.get'],
          queryFn: async () => {
            // const { data } = await axios.post(
            //   '/dataPacket/transfer/queryByPage',
            //   {
            //     pageNo: current || 1,
            //     pageSize,
            //     params: {
            //       Q_unit_name_S_LK: '单位名称',
            //       Q_file_name_S_LK: filter.name,
            //     },
            //   },
            //   {
            //     baseURL: import.meta.env.MODE === 'development' ? '' : `http://${serve.F_IP_}`,
            //   },
            // );
            // return data;
            const data: any = await invoke('rsync_list', {
              url: `http://${serve.F_IP_}/api/api-ida/dataPacket/transfer/queryByPage`,
              slug,
              page: String(current || 1),
              pageSize: String(pageSize),
              name: filter.name || '',
            });

            return data;
          },
        });

        console.log(result);

        return {
          data: result.data,
          success: true,
          total: result.totalCount,
        };
      }}
      pagination={{
        pageSize: 20,
        onChange: page => console.log(page),
      }}
      dateFormatter="string"
      headerTitle={
        <Button type="primary" onClick={() => {
          setFilter({
            name: '',
          });
          actionRef.current?.reload();
        }}>数据同步</Button>
      }
      toolBarRender={() => [
        // eslint-disable-next-line react/jsx-key
        <ProForm<{
          name: string
        }>
          layout="inline"
          form={form}
          submitter={{
            searchConfig: {
              submitText: '查询',
            },
            render(props, dom) {
              return dom.reverse();
            },
            onSubmit() {
              form.submit();
            },
            onReset() {
              form.resetFields();
              form.submit();
            },
          }}
          onFinish={async (values) => {
            console.log(values);
            setFilter(values);
          }}
        >
          <ProFormText name="name" placeholder="文件名称" />
        </ProForm>,
      ]}
    />
  );
}
